<template>
<li>
  <p>名称：{{data.name}} <input type="checkbox" name="" value="" v-model="checked"></p>
  <p>价格：{{data.price}}</p>
  <p>销量：{{data.sales}}</p>
  <input type="button" name="" value="加3" @click="fnAdd">
  <input type="button" name="" value="减2" @click="fnMinus">
</li>
</template>

<script>
export default {
  data () {
    return {
      checked: false,
      data: {}
    }
  },
  mounted () {
    this.data = this.$attrs.data
  },
  methods: {
    // 这里不能直接调用函数，需要dispatch派发需要的actions的函数
    fnAdd () {
      this.$store.dispatch('addCount', 3)
    },
    fnMinus () {
      this.$store.dispatch('minusCount', 2)
    }
  },
  watch: {
    checked () {
      if (this.checked) {
        this.$attrs.plus()
      } else {
        this.$attrs.minus()
      }
    }
  }
}
</script>

<style>
</style>
